import React, { Component } from "react";

class SetState extends Component {
  constructor(props) {
    super(props)
    this.state = {
      name: '张三',
      count: 1
    }
  }

  changeName = () => {
    this.setState({ name: this.state.name === '张三' ? '李四' : '张三' })
    // this.setState({ count: this.state.count + 1 })
    // this.setState({ count: this.state.count + 1 })
    this.setState((prev) => {
      prev.count = prev.count + 1
      return prev
    })
    this.setState((prev) => {
      prev.count = prev.count + 1
      return prev
    })
  }

  render() {
    console.log('多个 setState 只执行一次')
    return (
      <div>
        <h3>基本流程：</h3>
        <p>1. 调用 setState 时不会立即更新状态。</p>
        <p>2. React 会将更新任务<b>放入更新队列</b>，然后根据调度策略（优先级、是否处于事件中）合并更新。</p>
        <p>3. 在适当时机执行一次批量渲染（Batch Update）。</p>

        <h3>目的：</h3>
        <p>1. 减少不必要的多次 DOM 更新</p>
        <p>2. 多个 setState 被合并后，只渲染一次组件</p>
        <p>特别在事件回调、生命周期中表现明显</p>
      
        <h3>注意：</h3>
        <code>
          <p>{ 'setState({ count: this.state.count + 1 })' }</p>
          <p>{ 'setState({ count: this.state.count + 1 })' }</p>
          <p>后面的会覆盖前面的</p>
          <p>使用函数式写法才不会被覆盖</p>
          <p>{ 'setState((prev) => prev + 1)' }</p>
          <p>{ 'setState((prev) => prev + 1)' }</p>
        </code>

        <h3>示例：</h3>
        <p>{ this.state.name }</p>
        <p>{ this.state.count }</p>
        <button onClick={this.changeName}>点击后会同时改变名称和数字加1，两个 setState，但是 render 只执行一次，看控制台</button>
      </div>
    )
  }
}

export default SetState